import { Link } from '@brillout/docpress'

import { ProvidedBy, ConfigSpec } from '../../components'

<ConfigSpec
  env="client, server"
  providedBy={<ProvidedBy noCustomGuide />}
>
```ts ts-only hide-menu
type Value = string | null | undefined
type Title = Value | ((pageContext) => Value)
```
</ConfigSpec>

> See <Link href="/head-tags" /> for a general introduction about `<head>` tags.

The `+title` setting sets [the page's title](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_a_title).

```ts
// pages/+config.ts

import type { Config } from 'vike/types'

export default {
  title: 'Some Title'
} satisfies Config
```

> It adds
> [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)
> and
> [`<meta property="og:title">`](https://ogp.me)
> to `<head>`:
>
> ```html
> <head>
>   <title>Some Title</title>
>   <meta property="og:title" content="Some Title">
> </head>
> ```

You can set its value using a <Link href="/pageContext">`pageContext`</Link> function:

```ts
// pages/some-page/+title.ts
// Environment: server, client

import type { Data } from './+data'
import type { PageContext } from 'vike/types'

export function title(pageContext: PageContext<Data>) {
  return pageContext.data.product.title
}
```


## Under the hood

On the server-side, upon rendering the HTML of the first page, the `title` setting adds the [`<title>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) to the [`<head>` tag](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML).

On the client-side, upon <Link href="/client-routing">client-side page navigation</Link>, the `title` setting dynamically updates the page's title by mutating the DOM with [`document.title = 'Some Title'`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title).


## See also

- [MDN > What's in the head? Metadata in HTML > Adding a title](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_a_title)
- <Link href="/head-tags" />
- <Link href="/settings#html-shell" doNotInferSectionTitle />
